<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <base th:href="${#request.getContextPath()+'/'}">
    <title>我的购物车</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/shopping-mall-index.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/zhonglin.js"></script>
    <script type="text/javascript" src="http://localhost:8085/js/login.js"></script>
    <script type="text/javascript" src="layer/2.4/layer.js"></script>
</head>
<body style="position:relative;">

<!--top 开始-->
<div class="top">
    <div class="top-con w1200">
        <p class="t-con-l f-l" id="showUser">您好，欢迎来到宅客微购</p>
        <ul class="t-con-r f-r">
            <li><a href="#">我 (个人中心)</a></li>
            <li><a href="#">我的购物车</a></li>
            <li><a href="#">我的订单</a></li>
            <li class="erweima">
                <a href="#">扫描二维码</a>
                <div class="ewm-tu">
                    <a href="#"><img src="images/erweima-tu.jpg" /></a>
                </div>
            </li>
            <div style="clear:both;"></div>
        </ul>
        <div style="clear:both;"></div>
    </div>
</div>

<!--logo search 开始-->
<div class="hd-info1 w1200">
    <div class="logo f-l">
        <h1><a href="#" title="中林网站"><img src="images/logo.jpg" /></a></h1>
    </div>
    <div class="search f-r">
        <ul class="sp">
            <li class="current" ss-search="sp"><a href="JavaScript:;">商品</a></li>
            <li ss-search="dp"><a href="JavaScript:;">店铺</a></li>
            <div style="clear:both;"></div>
        </ul>
        <div class="srh">
            <div class="ipt f-l">
                <input type="text" placeholder="搜索商品..." ss-search-show="sp" />
                <input type="text" placeholder="搜索店铺..." ss-search-show="dp" style="display:none;" />
            </div>
            <button class="f-r">搜 索</button>
            <div style="clear:both;"></div>
        </div>
        <ul class="sp2">
            <li><a href="#">绿豆</a></li>
            <li><a href="#">大米</a></li>
            <li><a href="#">驱蚊</a></li>
            <li><a href="#">洗面奶</a></li>
            <li><a href="#">格力空调</a></li>
            <li><a href="#">洗发护发</a></li>
            <li><a href="#">葡萄 </a></li>
            <li><a href="#">脉动</a></li>
            <li><a href="#">海鲜水产</a></li>
            <div style="clear:both;"></div>
        </ul>
    </div>
    <div style="clear:both;"></div>
</div>

<!--切换城市-->
<div class="switch-city w1200">
    <a href="#" class="dianji-qh">切换城市</a>
    <span class="dqm">重庆市</span>
    <div class="select-city">
        <div class="sl-city-top">
            <p class="f-l">切换城市</p>
            <a class="close-select-city f-r" href="#">
                <img src="images/close-select-city.gif" />
            </a>
        </div>
        <div class="sl-city-con">
            <p>西北</p>
            <dl>
                <dt>重庆市</dt>
                <dd>
                    <a href="#">长寿区</a>
                    <a href="#">巴南区</a>
                    <a href="#">南岸区</a>
                    <a href="#">九龙坡区</a>
                    <a href="#">沙坪坝区</a>
                    <a href="#">北碚</a>
                    <a href="#">江北区</a>
                    <a href="#">渝北区</a>
                    <a href="#">大渡口区</a>
                    <a href="#">渝中区</a>
                    <a href="#">万州</a>
                    <a href="#">武隆</a>
                    <a href="#">晏家</a>
                    <a href="#">长寿湖</a>
                    <a href="#">云集</a>
                    <a href="#">华中</a>
                    <a href="#">林封</a>
                    <a href="#">双龙</a>
                    <a href="#">石回</a>
                    <a href="#">龙凤呈祥</a>
                    <a href="#">朝天门</a>
                    <a href="#">中华</a>
                    <a href="#">玉溪</a>
                    <a href="#">云烟</a>
                    <a href="#">红塔山</a>
                    <a href="#">真龙</a>
                    <a href="#">天子</a>
                    <a href="#">娇子</a>
                </dd>
                <div style="clear:both;"></div>
            </dl>
            <dl>
                <dt>新疆</dt>
                <dd>
                    <a href="#">齐乌鲁木</a>
                    <a href="#">昌吉</a>
                    <a href="#">巴音</a>
                    <a href="#">郭楞</a>
                    <a href="#">伊犁</a>
                    <a href="#">阿克苏</a>
                    <a href="#">喀什</a>
                    <a href="#">哈密</a>
                    <a href="#">克拉玛依</a>
                    <a href="#">博尔塔拉</a>
                    <a href="#">吐鲁番</a>
                    <a href="#">和田</a>
                    <a href="#">石河子</a>
                    <a href="#">克孜勒苏</a>
                    <a href="#">阿拉尔</a>
                    <a href="#">五家渠</a>
                    <a href="#">图木舒克</a>
                    <a href="#">库尔勒</a>
                </dd>
                <div style="clear:both;"></div>
            </dl>
            <dl>
                <dt>甘肃</dt>
                <dd>
                    <a href="#">兰州</a>
                    <a href="#">天水</a>
                    <a href="#">巴音</a>
                    <a href="#">白银</a>
                    <a href="#">庆阳</a>
                    <a href="#">平凉</a>
                    <a href="#">酒泉</a>
                    <a href="#">张掖</a>
                    <a href="#">武威</a>
                    <a href="#">定西</a>
                    <a href="#">金昌</a>
                    <a href="#">陇南</a>
                    <a href="#">临夏</a>
                    <a href="#">嘉峪关</a>
                    <a href="#">甘南</a>
                </dd>
                <div style="clear:both;"></div>
            </dl>
            <dl>
                <dt>宁夏</dt>
                <dd>
                    <a href="#">银川</a>
                    <a href="#">吴忠</a>
                    <a href="#">石嘴山</a>
                    <a href="#">中卫</a>
                    <a href="#">固原</a>
                </dd>
                <div style="clear:both;"></div>
            </dl>
            <dl>
                <dt>青海</dt>
                <dd>
                    <a href="#">西宁</a>
                    <a href="#">海西</a>
                    <a href="#">海北</a>
                    <a href="#">果洛</a>
                    <a href="#">海东</a>
                    <a href="#">黄南</a>
                    <a href="#">玉树</a>
                    <a href="#">海南</a>
                </dd>
                <div style="clear:both;"></div>
            </dl>
        </div>
    </div>
</div>

<!--内容开始-->
<div class="cart-content w1200">
    <ul class="cart-tit-nav">
        <li class="current"><a href="#">全部商品   21</a></li>
        <li><a href="#">降价商品   1</a></li>
        <li><a href="#">进口商品   1</a></li>
        <div style="clear:both;"></div>
    </ul>
    <div class="cart-con-tit">
        <p class="p1">
            <input type="checkbox" id="selectAllBut" value="" name="hobby"></input>
            <span>全选</span>
        </p>
        <p class="p2">商品信息</p>
        <p class="p3">规格</p>
        <p class="p4">数量</p>
        <p class="p5">单价（元）</p>
        <p class="p6">金额（元）</p>
        <p class="p7">操作</p>
    </div>
    <div class="cart-con-info" th:each="cart:${cartList}">
        <div class="info-top">
            <input type="checkbox" value=""></input>
            <span>商家：向东服饰专卖店 商品id：</span><span th:id="|goodsId_${cart.cartId}|" th:text="${cart.goodsId}"></span>
        </div>
        <div class="info-mid">
            <input type="checkbox" th:value="${cart.cartId}" th:id="|select_${cart.cartId}|" name="cartSelectBut"  class="mid-ipt f-l cartSelectBut"></input>
            <div class="mid-tu f-l">
                <a th:href="|http://localhost:8084/goodsPage/${cart.goodsId}.html|"><img th:src="${#strings.listSplit(cart.goods.goodsPic,'|')[0]}" style="width: 80px;height: 80px" /></a>
            </div>
            <div class="mid-font f-l" style="width: 240px;height: 74px">
                <a th:href="|http://localhost:8084/goodsPage/${cart.goodsId}.html|" th:text="${cart.goods.goodsName}"></a>
                <span>满赠</span>
            </div>
            <div class="mid-guige f-l" >
                <p>颜色：蓝色</p>
                <p>尺码：XL</p>
                <a href="JavaScript:;" class="xg" xg="xg1">修改</a>
                <div class="guige-xiugai" xg-g="xg1">
                    <div class="xg-left f-l">
                        <dl>
                            <dt>颜  色</dt>
                            <dd>
                                <a href="JavaScript:;" class="current">黑色</a>
                                <a href="JavaScript:;">白色</a>
                            </dd>
                            <div style="clear:both;"></div>
                        </dl>
                        <dl>
                            <dt>尺  码</dt>
                            <dd>
                                <a href="JavaScript:;" class="current">M</a>
                                <a href="JavaScript:;">L</a>
                                <a href="JavaScript:;">XL</a>
                            </dd>
                            <div style="clear:both;"></div>
                        </dl>
                        <a href="JavaScript:;" class="qd">确定</a>
                        <a href="JavaScript:;" class="qx" qx="xg1">取消</a>
                    </div>
                    <div class="xg-right f-l">
                        <a href="#"><img src="images/dai2.gif" /></a>
                    </div>
                    <div style="clear:both;"></div>
                </div>
            </div>
            <div class="mid-sl f-l">
                <a href="JavaScript:;" class="sl-left" th:onclick="|updateNumSubtract(${cart.cartId})|">-</a>
                <input type="text" th:value="${cart.goodsCount}" th:id="|num_${cart.cartId}|"  th:onchange="|updateNum(${cart.cartId})|" />
                <a href="JavaScript:;" class="sl-right" th:onclick="|updateNumInsert(${cart.cartId})|">+</a>
            </div>
            <p class="mid-dj f-l" th:text="${cart.goods.goodsPrice}"></p>
            <p class="mid-je f-l" th:id="|subTotal_${cart.cartId}|" th:text="${cart.goodsSubtotal}"></p>
            <div class="mid-chaozuo f-l">
                <a href="#">移入收藏夹</a>
                <a href="javascript:;" th:onclick="|deleteCart(${cart.cartId})|">删除</a>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div class="cart-con-info">
        <div class="info-tijiao">
            <p class="p1">实付款：<span id="subTotalSum" th:text="|¥${goodsSubtotal}|"></span></p>
            <button class="btn" onclick="submitOrder()">提交订单</button>
        </div>
    </div>

    <!--分页-->
    <div class="paging">
        <div class="pag-left f-l">
            <a href="#" class="about left-r f-l"><</a>
            <ul class="left-m f-l">
                <li><a href="#">1</a></li>
                <li class="current"><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">...</a></li>
                <li><a href="#">100</a></li>
                <div style="clear:both;"></div>
            </ul>
            <a href="#" class="about left-l f-l">></a>
            <div style="clear:both;"></div>
        </div>
        <div class="pag-right f-l">
            <div class="jump-page f-l">
                到第<input type="text" />页
            </div>
            <button class="f-l">确定</button>
            <div style="clear:both;"></div>
        </div>
        <div style="clear:both;"></div>
    </div>
    <div class="cart-con-footer">
        <input type="checkbox" value="" name="hobby"></input>
        <span>全选</span>
        <a href="#">删除</a>
        <a href="#">加入收藏夹</a>
        <p>（此处始终在屏幕下方）</p>
    </div>
</div>

<!--底部服务-->
<div class="ft-service">
    <div class="w1200">
        <div class="sv-con-l2 f-l">
            <dl>
                <dt><a href="#">新手上路</a></dt>
                <dd>
                    <a href="#">购物流程</a>
                    <a href="#">在线支付</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">配送方式</a></dt>
                <dd>
                    <a href="#">货到付款区域</a>
                    <a href="#">配送费标准</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd>
                    <a href="#">常见问题</a>
                    <a href="#">订购流程</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">售后服务</a></dt>
                <dd>
                    <a href="#">售后服务保障</a>
                    <a href="#">退款说明</a>
                    <a href="#">新手选购商品总则</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">关于我们</a></dt>
                <dd>
                    <a href="#">投诉与建议</a>
                </dd>
            </dl>
            <div style="clear:both;"></div>
        </div>
        <div class="sv-con-r2 f-r">
            <p class="sv-r-tle">187-8660-5539</p>
            <p>周一至周五9:00-17:30</p>
            <p>（仅收市话费）</p>
            <a href="#" class="zxkf">24小时在线客服</a>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

<!--底部 版权-->
<div class="footer w1200">
    <p>
        <a href="#">关于我们</a><span>|</span>
        <a href="#">友情链接</a><span>|</span>
        <a href="#">宅客微购社区</a><span>|</span>
        <a href="#">诚征英才</a><span>|</span>
        <a href="#">商家登录</a><span>|</span>
        <a href="#">供应商登录</a><span>|</span>
        <a href="#">热门搜索</a><span>|</span>
        <a href="#">宅客微购新品</a><span>|</span>
        <a href="#">开放平台</a>
    </p>
    <p>
        沪ICP备13044278号<span>|</span>合字B1.B2-20130004<span>|</span>营业执照<span>|</span>互联网药品信息服务资格证<span>|</span>互联网药品交易服务资格证
    </p>
</div>
<script type="text/javascript">
    $(function () {
        $("#selectAllBut").change(function (e) {
            var checked=$(this).prop("checked")
            if (checked){
                $(".cartSelectBut").prop("checked",true)
            }else {
                $(".cartSelectBut").prop("checked",false)
            }

        })
    })
    function updateNum(cartId) {
        var updateNum = $("#num_"+cartId).val();
        var goodsId = $("#goodsId_"+cartId).text();
        var param=new Object();
        param.cartId=cartId;
        param.goodsCount=updateNum;
        param.goodsId=goodsId;
        sendUrl(param,cartId);
    }
    function updateNumSubtract(cartId) {
        var updateNum =parseInt($("#num_"+cartId).val());
        var goodsId = $("#goodsId_"+cartId).text();
        var param=new Object();
        param.cartId=cartId;
        param.goodsCount=updateNum-1;
        param.goodsId=goodsId;

        sendUrl(param,cartId);

    }
    function updateNumInsert(cartId) {
        var updateNum =parseInt($("#num_"+cartId).val());
        var goodsId = $("#goodsId_"+cartId).text();
        var param=new Object();
        param.cartId=cartId;
        param.goodsCount=updateNum+1;
        param.goodsId=goodsId;
        sendUrl(param,cartId);
    }
    function sendUrl(param,cartId) {
        $.ajax({
            url: "http://localhost:8086/cart/updateNum",
            dataType:"JSONP",
            jsonpCallback:"updateNumAjax",
            data:param,
            success:function (data) {

                var result=JSON.parse(data);
                if (data){
                    $("#subTotalSum").text(result.subTotalSum);

                    $("#subTotal_"+cartId).text(result.goodsSubtotal)
                }
            }
        })

    }
    function deleteCart(cartId) {
        var param=new Object();
        param.cartId=cartId;
        layer.confirm('确认要删除吗？',function(index){
            $.ajax({
                url: "http://localhost:8086/cart/del",
                dataType: 'JSONP',
                jsonpCallback: "deleteCartAjax",
                data: param,
                success: function(result){
                    var data=JSON.parse(result);
                    if(data.status=="ok") {
                        layer.msg(data.msg, {icon: 1, time: 2000});
                        setTimeout(function () {
                            location.reload()
                        },1000)
                    }else {
                        layer.msg(data.msg, {icon: 2, time: 2000});
                    }
                },
                error:function(data) {
                    console.log(data.msg);
                },
            });
        });

    }
    function submitOrder() {
        var nickName=$("#nickName").text()
        if (nickName=="") {
            layer.msg("没有登陆，请先登陆",{icon: 2})
            var url = location.href;
            location.href="http://localhost:8085/toLogin?returnUrl="+url
        }else {
            var selectList = $(".cartSelectBut").prop("checked");
            var selectList=new Array();
            var cartId="";
            var cartIdStr="cartId="
            $("input[name='cartSelectBut']:checkbox:checked").each(function(){
                var cartIdStr2=cartIdStr+$(this).val()+"&"
                cartId=cartId+cartIdStr2
                selectList.push($(this).val());
            })
            if (selectList.length == 0) {
                layer.msg("请先选择商品",{icon: 2})
            }else {
                location.href="http://localhost:8087/order/affirmOrder?"+cartId
            }
        }

    }
</script>
</body>
</html>